<template>
    <div class="captcha_box">
        <div>
            <van-nav-bar title="" left-text="" right-text="" left-arrow @click-left="back" />
        </div>

        <van-cell class="text" :border="false" center title="设置新密码" label="请输入新密码，并重新登录验证" />

        <div class="inputBox">

            <van-form @submit="onSubmit">
            <!--带密码可见功能的密码输入框-->
                <password-field v-model="newpassword"  placeholder="请输入6-20位字母与数字组合"></password-field>
                <div class="btn">
                    <van-button  round color="#ff7b57" block type="info" native-type="submit" size="large">下一步</van-button>
                </div>
            </van-form>
        
        </div>
    </div>
</template>

<script>
import Vue from 'vue';
import { Toast } from 'vant';
import PasswordField from "../../components/setting/ComAccountSecurity/ComPass.vue";
Vue.use(Toast);

// 引入修改密码axios
import { changePassword } from "../../https/loginApi";

export default {
    name: "SetNewPassword",
    components: {
        PasswordField,
      },
    data(){
        return{
            newpassword:'',//当前输入框的值=旧密码
            phoneNum:''   
        }
    },
    created() {
       this.phoneNum=this.$store.state.userNumber
    },
    methods:{
        back() {
            this.$router.go(-1)
        },


        onSubmit(){
            console.log('newpassword:', this.newpassword)

            //给后端发请求修改新密码
            changePassword(this.phoneNum,this.newpassword)
            .then((res) => {
                console.log('设置成功', res)
                
                let that=this
                Toast({
                    message: '设置成功请重新登录!',
                    duration: 1000,
                    onClose() {
                        that.$router.push({ path:'/UserPwdLogin'})  //这样用this将会指向toast  ，所以用that替代this将指向sub
                    }
                })
                
            })
            .catch((err) => {
                console.log(err)
                Toast.fail('设置成功!');
            })
        },
 
        
    }
}
</script>

<style scoped>
    .text{
        font-size: 24px;
    }
    .btn{
    margin: 80px auto ;
    }
    .inputBox{
        margin: 50px auto ;
        width: 92%;
    }



</style>
